觀看金魚都能懂網頁設計入門 23
https://codepen.io/mikeyam/pen/ZEWPgGg?editors=1100 客製化選單

在開始製作有RWD的客製化選單前，我們要清楚知道我們要由手機開始製作到桌機，還是由桌機開始製作到手機？

• 我們可以運用input和label兩個做選單觸發，當我們點選到label選單時，可以觸發label的checkbox，兩者之間就是靠 id="menu_control"來連接

    <input type="checkbox" name="" id="menu_control">
            <!-- label可以控制input的checkbox -->

    <div class="Navbar">
        <h1 class="logo">
            <a href="#">
                <img src="https://picsum.photos/60/40?random-1" alt="">
            </a>
        </h1>
        <label for="menu_control" class="menu_btn">
            <span>選單</span>
        </label>
        <nav>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
        </nav>
    </div>

我們可以透過Css猜解來理解css設定原因

• Navbar
  position: relative;是為了固定漢堡選單的而設定的相對定位

.Navbar{
    height: 50px;
    background-color: #000;
    position: relative;
}

• Logo
  a連結為 inline，因此要用 block 來改變，讓 a 連結可以設定寬高

.logo{
    width: 60px;
    height: 40px;
    margin: 0 10px;
}
.logo img{
    display: block;
}
.logo a{
    display: block;
    height: 40px;
}

• 選單
  position: absolute;固定選單位置
  opacity: 0; 文字隱藏
  .menu_btn::before 用偽元素來增加樣式
  box-shadow 用來增加樣式

.menu_btn{
    display: block;
    width: 40px;
    height: 40px;
    background-color: blue;
    position: absolute;
    top: 5px;
    right: 10px;
    color: white;
}
/* 使選單文字消失
兩種方法：
1. 使用opacity:0;
2. 超出範圍隱藏起來
 */
.menu_btn span{
    opacity: 0;
    width: 1px;
    height: 1px;
    display: block;
    overflow: hidden;
}
.menu_btn::before{
    content: '';
    position: absolute;
    height: 2px;
    left: 2px;
    width: 36px;
    background-color: whitesmoke;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0px 8px 0px whitesmoke,0px -8px 0px whitesmoke;
}

• input控制器
  #menu_control:checked ~ .Navbar nav
  『 ~ 』這個選取器，它會選擇所有.Navbar nav，只要他們是在 #menu_control:checked 之後
  https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
  opacity: 0; 控制器設定隱藏

#menu_control:checked ~ .Navbar nav{
    left: 0;

#menu_control{
    position: absolute;
    z-index: -2;
    opacity: 0;
}

• media rules
  在不超過767px以下（手機版）設定nav樣式

@media screen and (max-width: 767px){
    nav{
    height: calc(100vh - 50px);
    width: 80%;
    background-color: #000;
    position: absolute;
    top: 50px;
    left: -100%;
    transition: .5s;
   }
}

• media rules
  在不小於768px以上（平板、桌機）
  把漢堡選單隱藏

@media screen and (min-width: 768px){
    .menu_btn{
        display: none;
    }
    .Navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    nav{
        display: flex;
        position: relative;
        left: 0;
        width: auto;
        height: auto;
        top: 0;
        background-color: transparent;
    }
    nav a{
        border-bottom: none;
    }
}